<template>
    <view class="ranking-page bg-gray-100 min-h-screen p-4">
      <view class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
        <view class="p-4 bg-green-50 border-b border-green-100">
          <text class="text-lg font-bold text-green-700">我的排名</text>
        </view>
        <view class="p-4 flex items-center">
          <view class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mr-4 text-white font-bold text-xl">
            <text>{{ currentRank }}</text>
          </view>
          <view class="flex-1">
            <view class="flex items-center">
              <text class="font-bold text-lg">{{ studentInfo.name }}</text>
              <view class="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">
                <text>{{ studentInfo.department }}</text>
              </view>
            </view>
            <view class="flex mt-1">
              <text class="text-sm text-gray-500 mr-4">累计: {{ runningData.totalDistance }}km</text>
              <text class="text-sm text-green-600 font-bold">{{ runningData.points }}分</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="bg-white rounded-lg shadow-md overflow-hidden">
        <view class="p-4 bg-green-50 border-b border-green-100 flex">
          <view class="flex-1 text-center">
            <text class="text-green-700 font-bold">总排行榜</text>
          </view>
          <view class="flex-1 text-center">
            <text class="text-gray-500">学院排行</text>
          </view>
          <view class="flex-1 text-center">
            <text class="text-gray-500">好友排行</text>
          </view>
        </view>
        
        <view class="p-4">
          <view v-for="(user, index) in leaderboard" :key="index" 
               class="flex items-center py-3 border-b border-gray-100"
               :class="{'border-b-0': index === leaderboard.length - 1}">
            <view :class="['w-6 h-6 rounded-full flex items-center justify-center mr-3 text-white font-medium', 
                         index === 0 ? 'bg-yellow-500' : 
                         index === 1 ? 'bg-gray-400' : 
                         index === 2 ? 'bg-amber-600' : 'bg-gray-300']">
              <text>{{ index + 1 }}</text>
            </view>
            <view class="w-8 h-8 rounded-full overflow-hidden mr-3">
              <image :src="user.avatar" mode="aspectFill" class="w-full h-full" />
            </view>
            <view class="flex-1">
              <view class="flex items-center">
                <text class="font-medium">{{ user.name }}</text>
                <view class="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">
                  <text>{{ user.department }}</text>
                </view>
              </view>
              <text class="text-xs text-gray-500">累计 {{ user.distance }}km</text>
            </view>
            <text class="text-green-600 font-bold">{{ user.points }}分</text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useUserStore } from '@/store/modules/user'
  import { useRunningStore } from '@/store/modules/running'
  
  // 使用Pinia Store
  const userStore = useUserStore()
  const runningStore = useRunningStore()
  
  // 从Store获取数据
  const studentInfo = computed(() => userStore.studentInfo)
  const runningData = computed(() => runningStore.runningData)
  const leaderboard = computed(() => runningStore.leaderboard)
  const currentRank = computed(() => runningStore.currentRank)
  </script>